#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.wizard-big.wizard > .content{
    min-height: 450px;
}
.t-step{ display: table; overflow: hidden; width: 100%; box-sizing: border-box; border: 1px solid #e7eaec; border-left: 0; border-radius: 3px;}
.t-steps{ display: table-cell; padding: 6px; position: relative; padding-left: 65px; border-left: 1px solid #ddd;}
.t-steps:before,.t-steps:after{position: absolute; z-index: 2;content: ''; display: block; top: 50%; margin-top: -13px; right:-20px; border:solid; border-width:13px 10px; border-color:transparent transparent transparent #ccc;}
.t-steps:after{ border-color:transparent transparent transparent #fff; right: -19px; z-index: 3;}
.t-steps i,.t-steps span{ position: absolute; left: 20px; display: inline-block; line-height: 30px; top: 50%; margin-top: -15px;}
.t-steps i{ font-size: 30px; display:none;}
.t-steps.complete i{ display: block; color: #1AB394;}
.t-steps.complete span{ display: none;}
.t-steps span{ width: 28px; height: 28px; line-height: 28px; border: 1px solid #999; color: #999; font-size: 18px; text-align: center; border-radius: 50%; box-sizing: border-box;}
.t-steps.active{ background: #1AB394; color: #fff;}
.t-steps.active i{ display:none;}
.t-steps.active span{ border-color: #fff; color: #fff;}
.t-steps.active:before,.t-steps.active:after{ border-color:transparent transparent transparent #1AB394;}
.t-steps.disabled{ color: #999; background: #f9f9f9;}
.t-steps.disabled:after{ border-color:transparent transparent transparent #f5f5f5;}
.t-steps h2{ font-size: 16px;}
</style>
#end
#@layout("预览体验版", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	   <div class="container-fluid">
	   	 <div class="row">
			<div class="ibox col-sm-12">
				<div class="ibox-content">
					<div class="t-step">
		                <div class="t-steps complete"> 
		                    <span class="t-steps-n">1</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>选择模板</h2>
		                </div>
		                <div class="t-steps complete">
		                    <span class="t-steps-n">2</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>设置体验者</h2>
		                </div> 
		                <div class="t-steps active">
		                    <span class="t-steps-n">3</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>预览新版</h2>
		                </div>
		                 <div class="t-steps disabled">
		                    <span class="t-steps-n">4</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>提交审核</h2>
		                </div>
		            </div>
		            
		            <form action="" method="post" class="form-horizontal col-sm-10" style="padding-top: 20px;">
						<div>
					        <div class="form-group">
					            <label class="col-md-3 control-label">扫码体验</label>
					            <div class="col-md-9">
					                <img style="width: 150px;height: 150px;" src="#(qrcode)"/>
					            </div>
					        </div>	
						</div>
						<div class="panel-default">
						  	<div class="panel-body" align="center">
						  		<a class="btn btn-default btn-sm" href="#(webctx)/weapp/sets/step2">上一步</a>
								<a class="btn btn-success btn-sm" href="#(webctx)/weapp/sets/step4">下一步</a>
						  	</div>
					  	</div>
				  	</form>
				</div>
		    </div> 
		 </div>	
	  </div>
</div>
#end